import Taro, { Component } from '@tarojs/taro'
import { AtForm, AtButton } from 'taro-ui'
import { View, Image, Text } from '@tarojs/components'
import { DNavBar, DImagesupload, DAtInpute } from '@/components'
import _dayjs from 'dayjs'
import http from '@/api'
import './deliveryupload.scss'

const map = require('../assets/positioning.png')

export default class deliveryupload extends Component {

  constructor(props) {
    super(props)
    this.state = {
      active: 0,
      date: _dayjs().format('YYYY-MM-DD HH:mm:ss'),
      carStocktaking: {},
      address: '',
      id: '',
      // outPic: ['车辆左前45°', '车辆右前45°', '车辆左后45°', '车辆右后45°'],
      inPic: ['中控全景', '公里数'],
      carInfo: ['车辆名牌', '玻璃窗车架号'],
      files: [],
      refOtNo: '',
      arr: [],
      arr1: [],
      arr2: [],
      arr3: [],
      arr31: [],
      arr32: [],
      arr42: [],
      arr41: [],
      arr4: [],
      remark: '',
      isNoNull1: false,
      isNoNull2: false,
      isNoNull3: false,
    }
  }
  componentWillMount() {
    this.setState({
      refOtNo: this.$router.params.orNo,
      refOtId: this.$router.params.id
    })

  }

  componentDidMount() { }


  handleClick(value) {
    this.setState({
      active: value
    })
  }

  onSubmit() {
    // let { carStocktaking } = this.state
    let { arr1, arr2, arr31, arr32, arr41, arr42, remark, isNoNull1, isNoNull2, isNoNull3 } = this.state
    let files = [...arr1, ...arr2, ...arr31, ...arr32, ...arr41, ...arr42]
    let _obj = {
      files: files,
      otfRemark: remark
    }
    let status21 = false, status22 = false, status31 = false, status32 = false
    if (arr1.length === 0) {
      return Taro.showToast({
        title: '请上传车辆外观照片',
        icon: 'none',
        duration: 2000
      })
    }
    files.map(item => {
      if (item.otfName === '中控全景') {
        status21 = true
      } else if (item.otfName === '公里数') {
        status22 = true
      } else if (item.otfName === '车辆名牌') {
        status31 = true
      } else if (item.otfName === '玻璃窗车架号') {
        status32 = true
      }

    })
    if (!status21) {
      return Taro.showToast({
        title: '请上传中控全景照片',
        icon: 'none',
        duration: 2000
      })
    } else
      if (!status22) {
        return Taro.showToast({
          title: '请上传公里数照片',
          icon: 'none',
          duration: 2000
        })
      } else if (!status31) {
        return Taro.showToast({
          title: '请上传车辆名牌照片',
          icon: 'none',
          duration: 2000
        })
      } else
        if (!status32) {
          return Taro.showToast({
            title: '请上传玻璃窗车架号照片',
            icon: 'none',
            duration: 2000
          })
        }
    http.uploadCarPhotos(_obj).then(res => {
      if (!res) {
        return;
      }
      Taro.showToast({
        title: '提交成功',
        duration: 800,
        mask: true
      }).then(() => {
        let { refOtId } = this.state
        setTimeout(() => {
          Taro.redirectTo({
            // url:`/pages/itemdetail/itemorder?id=${refOtId}&status=32`
            url: `/pages/shiporder/shiporder?active=1`
          })
        }, 1000)

      })
    })
  }

  onChangeImages(typeId, id, i, list) {
    const { outPic, inPic, carInfo, files, refOtNo, refOtId } = this.state
    let title = []
    // if (typeId === 1) {
    //   title = outPic
    // } else
    if (typeId === 2) {
      title = inPic
      if (id === '1') {
        let arr31 = []
        if (list.length > 0) {
          list.map(item => {
            let obj = {}
            obj['otfUrl'] = `${item.url}`,
              obj['otfName'] = `${title[i]}`,
              obj["otfType"] = `${typeId}${id}`,
              obj["otfId"] = `${item.id}`
            obj['refOtNo'] = refOtNo
            obj['refOtId'] = refOtId
            arr31.push(obj)
          })
        }
        this.setState({
          arr31
        })
      } else if (id === '2') {

        let arr32 = []
        if (list.length > 0) {
          list.map(item => {
            let obj = {}
            obj['otfUrl'] = `${item.url}`,
              obj['otfName'] = `${title[i]}`,
              obj["otfType"] = `${typeId}${id}`,
              obj["otfId"] = `${item.id}`
            obj['refOtNo'] = refOtNo
            obj['refOtId'] = refOtId
            arr32.push(obj)
          })
        }
        this.setState({
          arr32
        })
      }

    } else if (typeId === 3) {
      title = carInfo
      if (id === '1') {
        let arr41 = []
        if (list.length > 0) {
          list.map(item => {
            let obj = {}
            obj['otfUrl'] = `${item.url}`,
              obj['otfName'] = `${title[i]}`,
              obj["otfType"] = `${typeId}${id}`,
              obj["otfId"] = `${item.id}`
            obj['refOtNo'] = refOtNo
            obj['refOtId'] = refOtId
            arr41.push(obj)
          })
        }
        this.setState({
          arr41
        })
      } else if (id === '2') {
        let arr42 = []
        if (list.length > 0) {
          list.map(item => {
            let obj = {}
            obj['otfUrl'] = `${item.url}`,
              obj['otfName'] = `${title[i]}`,
              obj["otfType"] = `${typeId}${id}`,
              obj["otfId"] = `${item.id}`
            obj['refOtNo'] = refOtNo
            obj['refOtId'] = refOtId
            arr42.push(obj)
          })
        }

        this.setState({
          arr42
        })
      }
    } else
      if (typeId === 1) {

        let list1 = []
        list.map(item => {
          let obj = {
            otfUrl: item.url,
            otfName: '',
            otfType: '1',
            otfId: item.id,
            refOtNo: refOtNo,
            refOtId: refOtId
          }
          list1.push(obj)
        })
        this.setState({
          arr1: list1
        })
      } else
        if (typeId === 4) {
          let list2 = []
          list.map(item => {
            let obj = {
              otfUrl: item.url,
              otfName: '',
              otfType: '4',
              otfId: item.id,
              refOtNo: refOtNo,
              refOtId: refOtId
            }
            list2.push(obj)
          })
          this.setState({
            arr2: list2
          })
        }

  }
  handleRemark(remark) {
    this.setState({
      remark
    })
  }

  onLookImages(status = '') {
    Taro.navigateTo({
      url: `/pages/itemImages/itemImages?status=${status}`
    })
  }

  render() {
    const {
      active,
      list,
      date,
      carStocktaking,
      outPic,
      remark,
      inPic,
      carInfo
    } = this.state
    return (
      <View className='b_deliveryupload'>
        <DNavBar title={'上传照片'} className='b_deliveryupload_nav'></DNavBar>
        <View className='b_deliveryupload__box'>
          <View className='b_deliveryupload__form'>
            <AtForm>
              <View className='b_deliveryupload__form__item'>
                <View className='b_deliveryupload__form_title'>请上传以下验车照片</View>
                <View className='b_deliveryupload__images'>
                  <Text className="b_deliveryupload__images_title"><Text className='at-icon-star_'></Text>车辆外观</Text>
                  <Text className="b_deliveryupload__images_tips" onClick={this.onLookImages.bind(this, 'carout')}>查看范例</Text>
                  <View style='display:flex;justify-content:space-between'>
                    <DImagesupload count={8} text={'查看'} onChangeImages={this.onChangeImages.bind(this, 1, '1', 0)}></DImagesupload>
                    {/* <DImagesupload count={1} text={'查看'} onChangeImages={this.onChangeImages.bind(this, 1, '2', 1)}></DImagesupload>
                    <DImagesupload count={1} text={'查看'} onChangeImages={this.onChangeImages.bind(this, 1, '3', 2)}></DImagesupload>
                    <DImagesupload count={1} text={'查看'} onChangeImages={this.onChangeImages.bind(this, 1, '4', 3)}></DImagesupload> */}
                  </View>
                  {/* <View style='display:flex;justify-content:space-between'>
                    {outPic && outPic.map(item => {
                      return <Text >{item}</Text>
                    })
                    }
                  </View> */}

                </View>
                <View className='b_deliveryupload__images'>
                  <Text className="b_deliveryupload__images_tips" onClick={this.onLookImages.bind(this, 'carinside')}>查看范例</Text>
                  <Text className="b_deliveryupload__images_title"><Text className='at-icon-star_'></Text>车内照片</Text>
                  <View style='display:flex;'>
                    <View style='margin-right:15px'><DImagesupload count={1} onChangeImages={this.onChangeImages.bind(this, 2, '1', 0)}></DImagesupload></View>
                    <View style='margin-right:15px'><DImagesupload count={1} onChangeImages={this.onChangeImages.bind(this, 2, '2', 1)}></DImagesupload></View>
                  </View>
                  <View style='display:flex;'>
                    {inPic && inPic.map(item => {
                      return <Text style='margin-right:35px'>{item}</Text>
                    })
                    }
                  </View>
                </View>
                <View className='b_deliveryupload__images'>
                  <Text className="b_deliveryupload__images_tips" onClick={this.onLookImages.bind(this, 'carinfo')}>查看范例</Text>
                  <Text className="b_deliveryupload__images_title"><Text className='at-icon-star_'></Text>车辆信息</Text>
                  <View style='display:flex;'>
                    <View style='margin-right:15px'><DImagesupload count={1} onChangeImages={this.onChangeImages.bind(this, 3, '1', 0)}></DImagesupload></View>
                    <View style='margin-right:15px'><DImagesupload count={1} onChangeImages={this.onChangeImages.bind(this, 3, '2', 1)}></DImagesupload></View>
                  </View>
                  <View style='display:flex;'>
                    {carInfo && carInfo.map(item => {
                      return <Text style='margin-right:30px'>{item}</Text>
                    })
                    }
                  </View>
                </View>
                <View className='b_deliveryupload__images'>
                  <Text className="b_deliveryupload__images_title">异常照片(如车辆异常，请上传照片)</Text>
                  <DImagesupload onChangeImages={this.onChangeImages.bind(this, 4, '', '')} count={8}></DImagesupload>
                </View>
              </View>
            </AtForm>
          </View>
          <DAtInpute value={remark} maxLength={500} onChange={this.handleRemark.bind(this)} title='备注' placeholder='若有异常可在此备注说明'></DAtInpute>
          <View className='b_deliveryupload__footer'>
            <AtButton className='item_btn' onClick={this.onSubmit.bind(this)}>确认提交</AtButton>
          </View>
        </View>
      </View>

    )
  }

}